<template>
  <div class="listening-container">
    <back-header title="听力练习">
      <template #icon>
        <van-icon name="audio" size="24" />
      </template>
    </back-header>

    <div style="height: 56px"></div>
    <div class="content">
      <div class="search-container">
        <van-search
          v-model="fileName"
          placeholder="请输入文件名搜索"
          @clear="handleSearch"
          @search="handleSearch"
        />
      </div>

      <!-- 下拉刷新和列表区域 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group>
            <van-cell v-for="item in list" :key="item.id">
              <template #title>
                <div>{{ item.name }}</div>
              </template>
              <template #label>
                <div>时长: {{ item.duration }}</div>
                <div>
                  得分：<van-tag type="success">{{ item.score }}</van-tag>
                </div>
                <div v-if="item.score">
                  上一次时间：{{ formatDate(item.createdTime) }}
                </div>
              </template>
              <template #right-icon>
                <van-button
                  style="margin-top: 20px"
                  type="primary"
                  size="small"
                  @click.stop="handlePlay(item)"
                >
                  开始练习
                </van-button>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import BackHeader from "@/components/common/BackHeader.vue";
import { ref, onMounted } from "vue";
import audioApi from "@/api/audio/index";
import { useRouter } from "vue-router";

const fileName = ref("");
const list = ref([]);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const router = useRouter();

// 获取列表数据
const getList = (isRefresh = false) => {
  return audioApi
    .getListForTest(fileName.value, page.value, pageSize.value)
    .then((res) => {
      if (isRefresh) {
        list.value = res.data;
      } else {
        list.value = [...list.value, ...res.data];
      }

      // 判断是否还有更多数据
      if (res.data.length < pageSize.value) {
        finished.value = true;
      }
      loading.value = false;
      refreshing.value = false;
    });
};

// 搜索处理
const handleSearch = () => {
  page.value = 1;
  finished.value = false;
  list.value = [];
  getList(true);
};

// 下拉刷新
const onRefresh = () => {
  finished.value = false;
  page.value = 1;
  getList(true);
};

// 上拉加载
const onLoad = () => {
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }
  page.value += 1;
  getList();
};

// 播放处理
const handlePlay = (item) => {
  // 处理播放逻辑，可以跳转到练习页面
  router.push({
    path: "/learning/listeningPractice",
    query: { id: item.id },
  });
};

// 日期格式化
const formatDate = (dateStr) => dateStr.replace("T", " ");

onMounted(() => {
  getList(true);
});
</script>

<style scoped>
.listening-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-color-scheme: dark) {
  .listening-container {
    background-color: #1a1a1a;
  }
}

.search-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 可以添加一些表格行的悬停效果 */
:deep(.el-table__row:hover) {
  cursor: pointer;
  background-color: #f5f7fa !important;
}
</style>
